<template>
  <div class="watermark-view">
    <!-- 一体化的水印生成与应用组件 -->
    <watermark-editor
      :text-content="textContent"
      :css-style="cssStyle"
      @update:text-content="textContent = $event"
      @update:css-style="cssStyle = $event"
      @generate="handleImageGenerated"
      @process-complete="handleProcessComplete"
    />
    
    <!-- 处理结果显示 -->
    <result-display 
      v-if="processResults" 
      :results="processResults" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import WatermarkEditor from './components/WatermarkEditor.vue';
import ResultDisplay from './components/ResultDisplay.vue';

const textContent = ref('');
const cssStyle = ref('font-size:20px; color: #fff; font-family: Arial; text-shadow: 1px 1px 2px #555;');
const imgUrl = ref(null);
const processResults = ref(null);

function handleImageGenerated(imageUrl) {
  imgUrl.value = imageUrl;
}

function handleProcessComplete(results) {
  processResults.value = results;
}
</script>

<style scoped>
.watermark-view {
  margin: 10px auto;
}
</style>